<template>
	<view :class="['task-detail',theme]" id="task-detail-page" @tap="pageTap" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
		<view class="funcs-header">
			<uni-icons fontFamily="iconfont" @click="goBack" :size="24" color="#666">{{'\ue64f'}}</uni-icons>
			<view class="group-title">{{titleMap[groupBy]}}</view>
		</view>
		<view :class="['baseInfo',scrollTop >0?'bottom-shadow':'']">
			<view class="status">
				<uni-icons fontFamily="iconfont" @click="updateFinishStatus" v-if="taskInfo.finishStatus===0" :size="24" color="#626262">{{'\ue741'}}</uni-icons>
				<uni-icons fontFamily="iconfont" @click="updateFinishStatus" v-if="taskInfo.finishStatus===1" :size="24"
					:color="finishStatusDisabled?'#ccc':'var(--theme-color)'">{{'\ue712'}}</uni-icons>
			</view>
			<view class="title">
				<textarea :class="{finish:taskInfo.finishStatus,'task-disabled':disabled}" auto-height :disabled="disabled" :value="taskInfo.taskContent" type="text" @blur="contentBlur" />
			</view>

			<view class="store">
				<uni-icons fontFamily="iconfont" @click="updateItem({flag:1})" v-if="taskInfo.flag===0" :size="24" color="#626262">{{'\ue624'}}</uni-icons>
				<uni-icons fontFamily="iconfont" @click="updateItem({flag:0})" v-if="taskInfo.flag===1" :size="24" color="var(--theme-color)">{{'\ue60a'}}</uni-icons>
			</view>
		</view>


		<scroll-view scroll-y="true" class="edit-area" @scroll="scrollHandle">
			<view class="add-steps">
				<view class="step-item" v-for="item in taskSteps" :key="item.stepId">
					<iconSwtich :flag="Boolean(item.finishStatus)" :icons="['\ue741','\ue712']" @change="()=>updateStepHandle({...item,finishStatus:Number(!item.finishStatus)})"
						:colors="['#626262','var(--theme-color)']" />
					<view class="step-info">
						<textarea :disabled="disabled" :class="{'task-disabled':disabled}" auto-height :value="item.stepContent" type="text" class="step-context"
							@blur="(e)=>updateStepHandle({...item,stepContent:e.target.value})" />
						<popup-menu :menus="listOpeates" v-if="!disabled" :tapRefers="tapRefers" @select="(value)=>stepOperate(value,item)">
							<uni-icons fontFamily="iconfont" :size="24" color="#626262">{{'\ue600'}}</uni-icons>
						</popup-menu>
					</view>
				</view>
				<view class="add-default" v-if="!disabled">
					<iconSwtich :flag="!addFocus" :icons="['\ue741','\ue727']" :colors="['#626262','#2979ff']" />
					<textarea v-model="stepInpuValue" auto-height :class="['uni-input',addFocus?'focus':'']" @focus="addFocus=true" @blur="addBlurHandle" :placeholder="stepInpuValue?'':'添加步骤'"
						@confirm="newStep" />
				</view>
			</view>
			<view class="task-settings" v-if="userInfo.isAdmin">
				<view class="setting-item">
					<uni-icons fontFamily="iconfont" :size="20" :color="taskInfo.assignId?'#2979ff':'#626262'">{{'\ue637'}}</uni-icons>
					<view class="setting-context assign-context">
						<view class="settting-text" v-if="groupBy==='myday'" @tap="$refs.employeeTree._show()">分派任务</view>
						<view class="process-detail" v-if="groupBy==='assign'">
							<view class="txt">
								{{`完成${processList.filter(item=>item.finishStatus).length}/${processList.length}`}}
							</view>

						</view>
						<uni-icons fontFamily="iconfont" v-if="groupBy==='assign'" @tap="$refs.processList.open('bottom')" :size="20" color="#626262">{{'\ue93a'}}</uni-icons>

					</view>

				</view>
			</view>
			<view class="task-settings">
				<view class="setting-group">
					<view class="setting-item ">
						<uni-icons fontFamily="iconfont" :size="20" :color="taskInfo.remindTime?'#2979ff':'#626262'">{{'\ue668'}}</uni-icons>
						<view class="setting-context">
							<popup-menu :tapRefers="tapRefers" :menus="remindOperates()" @select="remindSelect">
								<view class="hasSet remindTime" v-if="taskInfo.noticeDateTime">
									<view class="time">
										{{`在 ${timeSimpleTxt(dayjs(taskInfo.noticeDateTime).hour())}${dayjs(taskInfo.noticeDateTime).format('HH:mm')} 时提醒我`}}
									</view>
									<view class="date">
										{{dateSimpleTxt(taskInfo.noticeDateTime)}}
									</view>
								</view>
								<view class="settting-text" v-else>提醒我</view>
							</popup-menu>
							<uni-icons fontFamily="iconfont" @tap="updateItem({noticeDateTime:null})" v-if="taskInfo.noticeDateTime&&!disabled" :size="20" color="#999">{{'\ue686'}}</uni-icons>
						</view>
					</view>
					<view class="setting-item">
						<uni-icons fontFamily="iconfont" :size="20" color="#626262">{{'\ue737'}}</uni-icons>
						<view class="setting-context" :class="{'task-disabled':disabled}">
							<popup-menu :tapRefers="tapRefers" :disabled="disabled" :menus="deadTimeOperates()" @select="deadTimeSelect">
								<view class="hasSet" v-if="taskInfo.deadTime">
									{{`${dateSimpleTxt(taskInfo.deadTime)} 到期`}}
								</view>
								<view class="settting-text" v-else>添加截止日期</view>
							</popup-menu>
							<uni-icons fontFamily="iconfont" @tap="updateItem({deadTime:null})" v-if="taskInfo.deadTime&&!disabled" :size="20" color="#999">{{'\ue686'}}</uni-icons>

						</view>
					</view>
					<view class="setting-item">
						<uni-icons fontFamily="iconfont" :size="20" color="#626262">{{'\ue60b'}}</uni-icons>
						<view class="setting-context" :class="{'task-disabled':disabled}">
							<popup-menu :tapRefers="tapRefers" :disabled="disabled" :menus="repeatOperates" @select="repeatSelect">
								<view class="hasSet repeatTime" v-if="taskInfo.repeatCircle">
									<view class="time">
										{{getRepeatTxt()}}
									</view>
									<view class="date" v-if="['workday','week'].includes(taskInfo.repeatUnit)&&taskInfo.repeatExtFields">
										{{getRepeatDay().join(",")}}
									</view>
								</view>
								<view class="settting-text" v-else>重复</view>
							</popup-menu>
							<uni-icons fontFamily="iconfont" @tap="updateItem({repeatCircle:null,repeatUnit:null,repeatExtFields:null})" v-if="taskInfo.deadTime&&!disabled" :size="20"
								color="#999">{{'\ue686'}}</uni-icons>
						</view>
					</view>
				</view>

			</view>

			<view class="task-settings">
				<view class="setting-item" v-for="file in fileList" :key="file.fileId">
					<view class="file-type-rect">
						{{getFileType(file.fileType)}}
					</view>
					<view class="setting-context">
						<view class="file-info" @tap="previewFile(file.fileUrl)">
							<view class="filename">
								{{file.fileName}}
							</view>
							<view class="size-type">
								<view class="file-size">
									{{formatFileSize(Number(file.fileSize))}}
								</view>
								<view class="file-type">
									{{getFileTxtType(file.fileType)}}
								</view>

							</view>

						</view>
						<uni-icons fontFamily="iconfont" v-if="!disabled" :size="20" @tap="deleteFile(file)" color="#999">{{'\ue686'}}</uni-icons>
					</view>
				</view>
				<view class="setting-item" v-if="!disabled">
					<view class="icon-area">
						<uni-icons fontFamily="iconfont" :size="20" color="#999">{{'\ue6a9'}}</uni-icons>
					</view>

					<view class="setting-context add-file" @tap="openFileDialog">
						添加附件
					</view>
				</view>
			</view>

			<view class="node-box" @tap="openEditor">

				<view class="node-edit">
					<view v-html="taskInfo.note" class="note-html">

					</view>
				</view>
				<view class="note-status">
					<view class="update-time">
						<text v-if="taskInfo.noteUpdateTime">
							{{updateTimeFormat(taskInfo.noteUpdateTime)}}
						</text>
					</view>
					<view class="open-edit">
						打开
					</view>
				</view>


			</view>

		</scroll-view>
		<view class="task-status-box">
			<view class="status-desc">{{taskStatusText}}
			</view>
			<uni-icons @tap="openDeleteBox" v-if="!disabled" fontFamily="iconfont" :size="20" color="#626262">{{'\ue642'}}</uni-icons>

		</view>
		<uni-popup ref="popup">
			<mxDatepicker :show="true" :type="datePickerOptions.type" @confirm="confirmHandle" @cancel="$refs.popup.close()" />
		</uni-popup>
		<uni-popup ref="editor">
			<myEditor :title="taskInfo.taskContent" :disabled="disabled" :updateTime="taskInfo.noteUpdateTime" :note="taskInfo.note" @close="closeEditor" v-if="showEditor" ref="editorRef">
			</myEditor>
		</uni-popup>

		<tkiTree ref="employeeTree" :range="userTreeData" rangeKey="name" confirmColor="#4e8af7" multiple @confirm="assignConfirm" />
		<uni-popup ref="circlePopup">
			<customCircle @close="$refs.circlePopup.close()" @confirm="customCircleConfirm" />
		</uni-popup>
		<uni-popup ref="deletConfirm" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" content="确认要删除吗" @confirm="deleteTask" @close="$refs.deletConfirm.close()"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="finishConfirm" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" content="分派任务完成后状态不可修改,确认完成吗？" @confirm="finishTask" @close="$refs.finishConfirm.close()"></uni-popup-dialog>
		</uni-popup>
		<qiunLoading :loadingType="4" v-if="loading" class="loading-task-list" />
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		<uni-popup ref="processList" type="bottom">
			<assignTaskDetail :processList="processList" />
		</uni-popup>

	</view>
</template>

<script>
	import myEditor from './components/editor.vue'
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import request from '@/common/request'
	import iconSwtich from '@/components/icon-switch/icon-swtich.vue'
	import popupMenu from '@/components/popup-menu/popup-menu.vue'
	import fileList from './components/file-list.vue'
	import qiunLoading from '../../components/qiun-loading/qiun-loading.vue';
	import taskRefresh from '@/mixins/taskRefresh.js';
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import customCircle from './components/customCircle.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import config from '@/config.js'
	import assignTaskDetail from './components/assignTaskDetail.vue'

	import 'dayjs/locale/zh-cn';
	import dayjs from 'dayjs'
	import {
		getTempId,
		updateTimeFormat,
		getNextWorkingDay,
		nextDay,
		nextCustomWeekDay,
		nextCircleDate,
		weekMap,
		calcToday,
		timeSimpleTxt,
		dateSimpleTxt,
		getNowTime,
		formatFileSize,
		getFileTxtType,
		getFileType

	} from '@/utils/taskList'

	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex';
	dayjs.locale('zh-cn')
	export default {
		components: {
			iconSwtich,
			popupMenu,
			mxDatepicker,
			fileList,
			// note,
			myEditor,
			tkiTree,
			customCircle,
			qiunLoading,
			uniPopupDialog,
			assignTaskDetail
		},
		mixins: [taskRefresh],

		data() {
			return {
				taskId: null,
				groupBy: "",
				taskInfo: {},
				titleMap: {
					"myday": "我的一天",
					"assign": "已分配任务",
					"tome": "已分配给我"
				},
				userTreeData: [],
				tapRefers: {}, // 里边的事件会在每次页面tap时触发
				addFocus: false,
				stepInpuValue: "",
				scrollTop: 0,
				showEditor: false,
				listOpeates: [{
						icon: "\ue727",
						title: "提升为任务",
						value: 1
					},
					{
						icon: "\ue642",
						title: "删除步骤",
						value: 2
					},
				],
				remindOperates: () => [{
						icon: "\ue654",
						title: `今日晚些时候${calcToday()}`,
						value: 1,
						disabled: (24 - dayjs().hour()) < 3 || dayjs().hour() < 6,
						date: dayjs().add(3, 'hour').minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')
					},
					{
						icon: "\ue676",
						title: "明天(上午9:00)",
						value: 2,
						date: dayjs().add(1, 'day').set('hour', 9).set('minute', 0).set('second', 0).format(
							'YYYY-MM-DD HH:mm:ss')

					},
					{
						icon: "\ue64e",
						title: "下周",
						value: 3,
						date: dayjs().add(7, 'day').set('hour', 9).set('minute', 0).set('second', 0).format(
							'YYYY-MM-DD HH:mm:ss')
					},
					{
						icon: "\ue737",
						title: "选择日期和时间",
						value: 4
					},
				],
				deadTimeOperates: () => [{
						icon: "\ue654",
						title: `今天(${dayjs().format('dddd')})`,
						value: 1,
						date: dayjs().hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')
					},
					{
						icon: "\ue676",
						title: `明天(${dayjs().add(1,'day').format('dddd')})`,
						value: 2,
						date: dayjs().add(1, 'day').hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')

					},
					{
						icon: "\ue64e",
						title: "下周",
						value: 3,
						date: dayjs().add(7, 'day').hour(0).minute(0).second(0).format('YYYY-MM-DD HH:mm:ss')
					},
					{
						icon: "\ue737",
						title: "选择日期",
						value: 4
					},
				],
				repeatOperates: [{
						icon: "\ue6b4",
						title: "每1天",
						value: 1,
						data: { repeatCircle: 1, repeatUnit: 'day', repeatExtFields: "", deadTime: nextCircleDate(dayjs(), 'day') }
					},
					{
						icon: "\ue6aa",
						title: "工作日",
						value: 2,
						data: { repeatCircle: 1, repeatUnit: 'workday', repeatExtFields: "1;2;3;4;5", deadTime: getNextWorkingDay() }
					},
					{
						icon: "\ue64e",
						title: "每1周",
						value: 3,
						data: { repeatCircle: 1, repeatUnit: 'week', repeatExtFields: `${dayjs().day()}`, deadTime: nextCustomWeekDay(dayjs(), `${dayjs().day()}`) }
					},
					{
						icon: "\ue623",
						title: "每1个月",
						value: 4,
						data: { repeatCircle: 1, repeatUnit: 'month', repeatExtFields: "", deadTime: nextCircleDate(dayjs(), 'month') }
					},
					{
						icon: "\ue61b",
						title: "每1年",
						value: 5,
						data: { repeatCircle: 1, repeatUnit: 'year', repeatExtFields: "", deadTime: nextCircleDate(dayjs(), 'year') }
					},
					{
						icon: "\ue83c",
						title: "自定义",
						value: 6
					},
				],
				datePickerOptions: {
					type: "datetime",
					confirm: () => {}
				}
			}
		},
		watch: {
			taskList: {
				handler(newV, oldV) {
					console.log(newV, 'newV')
					this.refeshInfo()
				},
				deep: true,
			}
		},
		computed: {
			...mapState('taskStore', ['theme', 'taskList', 'userInfo', 'online']),
			taskSteps() {
				console.log(this.taskInfo.steps, 'this.taskInfo.steps')
				return this.taskInfo.steps.filter(item => !item.deleted)
			},
			taskStatusText() {
				const { finishStatus, createDateTime, endDateTime } = this.taskInfo
				if (finishStatus) {
					return `已在 ${dateSimpleTxt(endDateTime)} 完成`
				} else {
					return `创建于 ${dateSimpleTxt(createDateTime)}`
				}
			},
			disabled() {
				return this.groupBy === "assign" || this.groupBy === "tome"
			},
			fileList() {
				console.log(this.taskInfo.fileList, 'this.taskInfo.fileList')
				return this.taskInfo.fileList.filter(item => !item.deleted)
			},
			processList() {
				return this.taskInfo.processList || []
			},
			finishStatusDisabled() {
				return this.taskInfo.finishStatus && this.groupBy === 'tome'
			}
		},

		methods: {
			updateTimeFormat,
			calcToday,
			timeSimpleTxt,
			dayjs,
			dateSimpleTxt,
			getNowTime,
			formatFileSize,
			getFileTxtType,
			getFileType,
			...mapActions('taskStore', ['requestTasks']),
			...mapMutations('taskStore', ['updateTaskItem', 'addStep', 'updateStep', 'deleteStep', 'addTaskItem',
				'deleteTaskItem'
			]),
			goBack: uni.navigateBack,
			refeshInfo() {
				const target = this.taskList.find(item => item.taskId == this.taskId)

				if (target) {
					this.taskInfo = target
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},

			updateItem(props) {
				console.log(JSON.stringify(props), 'updateItem')
				const { taskId } = this.taskInfo
				this.updateTaskItem({
					taskId,
					props
				})
			},
			addBlurHandle() {
				this.addFocus = false
				this.newStep()
			},
			newStep() {
				if (!this.stepInpuValue) return
				const { steps } = this.taskInfo
				this.updateItem({
					steps: [...steps, { stepId: getTempId(), stepContent: this.stepInpuValue.trim(), finishStatus: 0 }]
				})
				this.stepInpuValue = ""
			},
			updateStepHandle(props) {
				const { stepId, stepContent } = props
				const { steps } = this.taskInfo
				if (!stepContent) return
				const updateTargetIndex = steps.findIndex(step => step.stepId === stepId)
				steps.splice(updateTargetIndex, 1, props)
				this.updateItem({
					steps
				})
			},

			scrollHandle(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			stepOperate({ value }, item) {
				const { steps: steps$1 } = this.taskInfo
				const { stepId } = item
				let steps = []
				if (typeof stepId === 'number') {
					steps = steps.filter(step => item.stepId !== step.stepId)
				} else {
					const targetIndex = steps$1.findIndex(item => item.stepId === stepId)
					const newStep = { ...steps$1[targetIndex], deleted: 1 }
					steps$1.splice(targetIndex, 1, newStep)
					steps = steps$1
				}
				if (value === 1) {
					this.addTaskItem({ props: { taskContent: item.stepContent } })
					uni.$emit('update:task-list', {
						groupBy: 'myday'
					})
					this.updateItem({ steps })
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.updateItem({ steps })
				}
			},
			remindSelect(option) {

				const { value, date } = option
				if ([1, 2, 3].includes(value)) {
					this.updateItem({
						noticeDateTime: date
					})
				} else if (value === 4) {
					this.show = true
					Object.assign(this.datePickerOptions, {
						confirm: (date) => this.updateItem({
							noticeDateTime: date
						}),
						type: 'datetime'
					})
					this.$refs.popup.open()
				}

			},
			deadTimeSelect(option) {
				const { value, date } = option
				if (value === 4) {
					this.show = true
					Object.assign(this.datePickerOptions, {
						confirm: (date) => this.updateItem({ deadTime: date, repeatExtFields: null, repeatCircle: null, repeatUnit: null }),
						type: 'date'
					})
					this.$refs.popup.open()
				} else {
					this.updateItem({ deadTime: date, repeatExtFields: null, repeatCircle: null, repeatUnit: null })
				}
			},
			repeatSelect(option) {
				const { value, data } = option
				if (value !== 6) {
					this.updateItem(data)
				} else {
					this.$refs.circlePopup.open()
				}
			},
			confirmHandle(dateInfo) {
				const { value, date } = dateInfo
				console.log('date', date)
				this.$refs.popup.close()
				this.datePickerOptions.confirm(dayjs(date).format('YYYY-MM-DD HH:mm:ss'))
			},
			pageTap() {
				Object.values(this.tapRefers).forEach(event => {
					event()
				})
			},
			deleteTask() {
				const { taskId } = this.taskInfo
				this.deleteTaskItem({
					taskId
				})
				uni.navigateBack({
					delta: 1
				});

			},
			openEditor() {
				this.showEditor = true
				this.$refs.editor.open()
			},
			closeEditor(data) {
				this.updateItem(data)
				this.showEditor = false
				this.$refs.editor.close()
			},
			assignConfirm(json) {
				const userIds = json.map(item => item.id).join(",")
				const { userId } = this.userInfo
				const { taskId } = this.taskInfo
				if (json.length === 0) {
					uni.showToast({
						title: "未选择分派人",
						icon: "none",
						duration: 3000
					});
					return
				}
				this.updateItem({})
				request.postRequest('/api/task/assigntask', { userIds, userId, taskId }).then(res => {
					const { code, msg } = res.data
					console.log(res.data, 'res')
					if (code === 200) {
						uni.showToast({
							title: "分派成功,即将跳转分派列表",
							icon: "none",
							duration: 3000
						});
						setTimeout(() => {
							uni.$emit('update:task-list', {
								groupBy: 'assign'
							})
							uni.navigateBack({
								delta: 1
							});
						}, 1500)


					} else {
						uni.showToast({
							title: msg,
							icon: "none",
							duration: 3000
						});
					}
				})
			},
			getRepeatTxt() {
				const { repeatUnit, repeatCircle } = this.taskInfo
				let returnTxt = ''
				if (repeatUnit === 'day') {
					returnTxt = `每${repeatCircle}天`
				} else if (['workday', 'week'].includes(repeatUnit)) {
					returnTxt = `每${repeatCircle}周`
				} else if (repeatUnit === 'month') {
					returnTxt = `每${repeatCircle}个月`
				} else if (repeatUnit === 'year') {
					returnTxt = `每${repeatCircle}年`
				}
				return returnTxt
			},
			getRepeatDay() {
				const { repeatUnit, repeatExtFields } = this.taskInfo
				console.log(repeatUnit, repeatExtFields)

				if (['workday', 'week'].includes(repeatUnit)) {
					const weekDays = repeatExtFields.split(";")
					return weekDays.map(item => weekMap[item])
				} else {
					return ''
				}
			},
			customCircleConfirm(data) {
				this.$refs.circlePopup.close()
				this.updateItem(data)
			},
			getUserTree() {
				request.getRequest('/api/users/user/tree', { userId: this.userInfo.userId }).then(res => {
					const { code, data } = res
					if (code === 200) {
						console.log(data, 'data')
						this.userTreeData = data
					}
				})
			},
			contentBlur(e) {
				this.updateItem({ taskContent: e.target.value })
			},
			openFileDialog() {
				if (!this.online) {
					return uni.showToast({
						title: '当前处于脱机状态',
						icon: 'none'
					})
				}
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: config.baseUrl + '/api/task/uploadFile',
					// 服务端接收附件的key
					name: 'file',
					type: 'attachment',
					userId: this.userInfo.userId,
					taskId: this.taskInfo.taskId
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					// header: {
					// 	'Authorization': 'bearer eyJhbGciOiJSUzI1NiIsIn',
					// 	'uid': '27682',
					// 	'client': 'app',
					// },
				});
			},
			onSuccess(res) {
				if (res.data.code === 200) {
					this.requestTasks()
				} else {
					uni.showToast({
						title: '文件上传失败!',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '附件上传成功!',
					icon: 'none'
				});
			},
			deleteFile(file) {
				console.log(file, 'file')
				const { fileList } = this.taskInfo
				const copyFileList = JSON.parse(JSON.stringify(fileList))
				const { fileId } = file
				const targetIndex = copyFileList.findIndex(item => item.fileId === fileId)
				const newFile = { ...copyFileList[targetIndex], deleted: 1 }
				copyFileList.splice(targetIndex, 1, newFile)
				this.updateItem({ fileList: copyFileList })
			},
			previewFile(url) {
				if (!this.online) {
					return uni.showToast({
						title: '当前处于脱机状态',
						icon: 'none'
					})
				}
				const fullUrl = config.baseUrl + url
				this.$refs.lFile.download({ url: fullUrl })
					.then(path => {
						console.log('path', path)
						// 打开文件
						this.$refs.lFile.open(path);
					});
			},
			openDeleteBox() {
				this.$refs.deletConfirm.open()
			},
			updateFinishStatus() {
				const { finishStatus } = this.taskInfo
				if (this.groupBy === 'tome') {
					if (finishStatus) {
						return
					} else {
						this.$refs.finishConfirm.open()
					}

				} else {
					this.updateItem({ finishStatus: Number(!finishStatus), endDateTime: getNowTime() })
				}
			},
			finishTask() {
				this.updateItem({ finishStatus: 1, endDateTime: getNowTime() })
				this.$refs.finishConfirm.close()
			}
		},
		onLoad(options) {
			const {
				groupBy,
				taskId
			} = options
			this.taskId = taskId
			this.groupBy = groupBy
			this.refeshInfo()
			this.getUserTree()
		},
		onShow() {
			console.log('onshow-taskdetail')
			this.requestTasks()
		},
		onBackPress() {
			if (this.showEditor) {
				this.$refs.editorRef.closeHandle()
				return true
			}
			return false
		}

	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.task-detail {
		background-color: #fafafa;
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);

	}

	.funcs-header {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 24upx;
		box-sizing: border-box;

		.group-title {
			font-size: 36upx;
			font-weight: bold;
			margin-left: 24upx;
			color: #333;
		}
	}

	.baseInfo {
		display: flex;
		padding: 12px 18px 12px 16px;

		.title {
			flex: 1;
			word-break: break-all;
			margin: 0 24px 0 12px;
			padding-top: 4upx;

			uni-textarea {
				width: auto;
			}

			.finish {
				text-decoration: line-through;
			}
		}

		&.bottom-shadow {
			z-index: 1;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}

	}

	.edit-area {
		flex: 1;
		overflow: hidden;
		background-color: #f0f0f0;

		/deep/ .uni-scroll-view::-webkit-scrollbar {
			width: 0;
			height: 0;
			display: none;
		}

		.add-steps {
			background-color: #fafafa;
			padding-bottom: 24upx;

			.step-item {
				display: flex;
				align-items: center;
				padding: 0 18px;

				.step-info {
					flex: 1;
					display: flex;
					align-items: center;
					border-bottom: 2upx solid #ccc;
					min-height: 48upx;
					margin-left: 24upx;
					padding: 24upx 0;

					.step-context {
						width: auto;
						flex: 1;
						margin-right: 24upx;
						color: #333;
						font-size: 28upx;
					}
				}

			}

			.add-default {
				display: flex;
				align-items: center;
				min-height: 48upx;
				padding: 12px 18px;
				font-size: 28upx;

				.uni-input {
					margin-left: 24upx;
					flex: 1;

					&:not(.focus) .textarea-placeholder {
						color: #2979ff
					}

				}
			}
		}


	}

	.task-settings {
		padding: 16upx;

		.setting-item {
			display: flex;
			align-items: center;
			background-color: #fafafa;
			padding-left: 10px;
			padding-right: 18px;

			.setting-context {
				flex: 1;
				margin-left: 18px;
				display: flex;
				align-items: center;
				padding: 12px 0;
				border-bottom: 1px solid #eee;
				font-size: 28upx;
				color: #555;
				min-height: 56upx;

				.root-contianer {
					flex: 1;

				}

				&>.settting-text {
					flex: 1;
				}

				.hasSet {
					color: #2979ff;

					&.remindTime,
					&.repeatTime {
						.time {
							margin-bottom: 8upx;
							font-size: 24upx;
						}

						.date {
							font-size: 20upx;
							color: #555;
						}

					}
				}

				.file-info {
					display: flex;
					flex-direction: column;
					flex: 1;
					color: #333;

					.filename {
						font-size: 24upx;
						text-overflow: ellipsis;
						overflow: hidden;
						max-width: 65vw;
						white-space: nowrap;
					}

					.size-type {
						display: flex;
						align-items: center;
						font-size: 18upx;
						color: #666;
						overflow: hidden;
						margin-top: 12upx;

						.file-type {
							margin-left: 12upx;
						}
					}
				}

				&.add-file {
					color: #2979ff;
				}

				&.assign-context {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.file-type-rect {
				min-width: 60upx;
				height: 60upx;
				border-radius: 8upx;
				background-color: #236bde;
				color: #fff;
				font-size: 20upx;
				text-align: center;
				line-height: 60upx;
			}

			.icon-area {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.setting-group {
			border-radius: 2px;

			&:not(:first-child) {
				margin-top: 8px;
			}
		}

	}

	.node-box {
		padding: 16upx 16upx 16upx 16upx;
		box-sizing: border-box;
		position: relative;

		.node-edit {
			background-color: #fff;
			padding: 16upx;
			padding-bottom: 56upx;
			width: 100%;
			box-sizing: border-box;
			color: #666;
			font-size: 26upx;
			height: 320upx;
			overflow-y: scroll;
			box-sizing: border-box;

			.note-html {
				width: 100%;
				max-height: 100%;
				overflow-y: scroll;
				word-wrap: break-word;
			}
		}

		.note-status {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			font-size: 24upx;
			bottom: 16upx;
			left: 0;
			width: 100%;
			padding: 16upx 36upx 16upx;


			.update-time {

				color: #7e7e7e;
			}

			.open-edit {
				color: #2979ff;
			}
		}
	}

	.task-status-box {
		border-top: 1px solid #ddd;
		display: flex;
		padding: 24upx;
		font-size: 24upx;
		color: #7e7e7e;
		z-index: 99;


		.status-desc {
			flex: 1;
		}
	}

	/deep/ .file-content {
		z-index: 101 !important;
	}
</style>